<script setup>
import { ref, toRefs } from "vue";
// let sum = ref(0); //当前求和 我们将这个sum放到pinia中
import { useCountStore } from "@/store/my-count.js";
const countStore = useCountStore();

// 注意：不要直接结构store中的state，因为store中的state是一个reactive对象，结构之后会失去响应式，需要使用toRefs()包裹一层,但是toRefs()会把reactive对象中的每一个属性都变成ref对象
//不管是state还是actions中的方法都变成了ObjectRefImpl(),代价有点太大了
// const { sum, school, address } = toRefs(useCountStore());

//所以建议使用pinia提供的storeToRefs()方法，这个方法只会包裹state中的属性，不会包裹actions中的方法
// console.log(countStore);//是一个reactive对象,这个对象中有sum属性，是一个ref对象
import { storeToRefs } from "pinia";
const { sum, school, address, bigSum, updateSchool, updateAddress } =
  storeToRefs(countStore);
let n = ref(1); //用户选择的数字
function increment() {
  // sum.value += n.value;
  // 这两种方式都可以拿到store中的sum值
  // console.log(countStore.sum);
  // console.log(countStore.$state.sum);
  //第一种修改pinia中state中数据方式
  // countStore.sum += n.value;
  //第二种修改pinia中state中数据方式
  // countStore.$patch({
  //   sum: 888,
  //   school: "郑州大学",
  //   address: "河南郑州",
  // });
  //第三种修改pinia中state中数据方式，借助action
  countStore.increment(n.value);
}
function decrement() {
  countStore.$state.sum -= n.value;
}
</script>
<template>
  <div class="count">
    <h3>求和组件,当前求和是:{{ sum }}</h3>
    <h3>学校的名字是:{{ school }}</h3>
    <h3>学校的地址是:{{ address }}</h3>
    <h3>从pinia中获取到getters中的bigSum:{{ bigSum }}</h3>
    <h3>从pinia中获取到getters中的school欢迎你:{{ updateSchool }}</h3>
    <h3>从pinia中获取到getters中的address小张各村305:{{ updateAddress }}</h3>
    <p></p>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <el-button type="primary" @click="increment">加</el-button>
    <el-button type="danger" @click="decrement">减</el-button>
  </div>
</template>

<style scoped>
.count {
  background-color: rgb(17, 141, 199);
  padding: 10px;
}
</style>